<template>
	<view class="home_index">
		<view class="index_content acea-row row-column bg-white borbox">
			<view class="content-bottom">
				<view class="recommand">
					<view class="recommand_content">
						<u-scroll-list>
							<view v-for="(item, index) in productList" :key="item.id">
								<view class="recommand_item">
									<view class="img_box">
										<image class="scroll-img" :src="item.image" mode="aspectFill"></image>
									</view>
									<view class="rec_name">
										{{ item.name }}
									</view>
								</view>
							</view>
						</u-scroll-list>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
import { getHomeDataNew } from '@/api/home.js'
export default {
	data() {
		return {
			productList: [],
		}
	},
	onLoad() {
		this.loadHomeData()
	},
	methods: {
		async loadHomeData() {
			let res = await getHomeDataNew()
			if (res.code == 200) {
				this.productList = res.data.productList
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.home_index {
	.index_content {
		width: 100%;
		padding: 36rpx 0;
		padding-bottom: 0rpx;
		background: #EDE4D1;

		.content-bottom {
			background: #F8F3E8;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 28rpx;
			width: 750rpx;
			box-sizing: border-box;
		}

		.recommand {
			.recommand_content {
				width: 100%;
				height: 416rpx;
				margin-top: 32rpx;
				position: relative;

				.recommand_item {
					width: 318rpx;
					height: 416rpx;
					margin-right: 24rpx;
					position: relative;

					.img_box {
						width: 318rpx;
						height: 318rpx;
						border-radius: 10rpx;
						margin-bottom: 16rpx;

						.scroll-img {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.rec_name {
						width: 100%;
						height: 52rpx;
						font-size: 32rpx;
						font-weight: 500;
						line-height: 52rpx;
						color: #43541B;
						// position: absolute;
						// bottom: 8rpx;
						// left: 0rpx;

					}
				}
			}
		}
	}
}
</style>
